<template>
  <el-dialog
    :title="isTitle ? '编辑菜单' : '创建菜单'"
    :visible="visible"
    @update:visible="$emit('update:visible', $event)"
    @closed="closed"
    @open="open"
  >
    <el-form
      ref="formRef"
      label-width="120px"
      :model="formData"
      :rules="formRules"
    >
      <el-form-item label="权限组名称">
        <!--
					v-model 绑定的值
					label：radio 的 value。可在vue-tools中查看（通过给label绑定不同的值，来实现单选）
					disabled：是否禁用 @change="radioValueChange"
					@change：绑定值（value）变化的时候触发的事件
				-->
        <el-radio v-model="is_point" :label="false">菜单</el-radio>
        <el-radio v-model="is_point" :label="true">权限点</el-radio>
      </el-form-item>
      <!--
				el-select中，v-model 的值为当前被选中的el-option的 value 属性值
				clearable:是否可以清空选项
				el-options中，value的值，指的是绑定的选项的值
				el-options中，label的值，指的是要显示的值（选项的标签，不设置则是value的值）
			-->
      <el-form-item label="权限组名称">
        <el-select
          ref="select"
          v-model="selectVal"
          clearable
          placeholder="请选择"
          @visible-change="changeClick"
        >
          <el-option key="data.id" hidden :value="selectVal" :label="selectTitle" />
          <el-tree
            ref="tree"
            show-checkbox
            node-key="id"
            :data="isData.childs"
            :props="defaultProps"
            :expand-on-click-node="false"
            :check-on-click-node="true"
            default-expand-all
            @node-click="handleNodeClick"
          />
        </el-select>

      </el-form-item>
      <el-form-item label="权限代码" prop="code">
        <el-input v-model="formData.code" style="width: 280px" />
      </el-form-item>
      <el-form-item label="权限标题" prop="title">
        <el-input v-model="formData.title" style="width: 280px" />
      </el-form-item>
    </el-form>
    <div class="bottom">
      <el-button @click="closed">取消</el-button>
      <el-button type="primary" @click="onConfirmClick">确定</el-button>
    </div>
  </el-dialog>
</template>


<script>
import { addMenusAPI, editMenusAPI } from '@/api/index'
export default {
  name: 'MenuDialog',
  props: {
    visible: Boolean,
    editData: {
      type: Object,
      default: () => ({})
    },
    isData: {
      type: Array,
      default: () => ([])
    }
  },
 data() {
    return {
      formData: {
        code: '',
        title: '',
				pid: '',
				is_point: false // 是否是权限点
      },
			// 表单验证
			formRules: {
        title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
        code: [{ required: true, message: '代码不能为空', trigger: 'blur' }]
      },
			// 树形控件的属性绑定对象
      defaultProps: {
        children: 'points', // 用来设置通过children属性展示子节点的信息。这里是指，通过children展示childs数组
        label: 'title'// 用来通过label设置属性节点文本展示，这里指 展示childs数组中的title
      },
      selectVal: '', // select框 绑定的值
      selectTitle: '', // select 显示的值
      isTitle: false,
			is_point: false // 是否是权限点,这个变量仅用来控制打开弹层能够默认选中一项
    }
  },
  // 监听响应式数据变化
  watch: {
    editData: {
      handler(value) {
        if (value) {
          // 编辑部门：回显数据
          this.formData = {
            code: value.code,
            title: value.title
          }
          this.selectTitle = value.title
          this.isTitle = true
        } else {
          // 新增部门：没有回显数据
          this.formData = {
            code: '',
            title: ''
          }
          this.selectTitle = ''
          this.isTitle = false
        }
      }
    }
  },
  methods: {
		changeClick(e) {
			if (e) {
				setTimeout(() => {
					this.isPoints()
				}, 0)
			}
		},
		isPoints() {
			if (this.is_point === false) {
				console.log(this.isData.childs);
				return
			} else {
				// 如果pid为null,则是第一层树，添加disabled属性
				const arr = []
				this.isData.childs.forEach(item => {
					if (item.pid === null) {
						item.disabled = true
						return arr.push(item)
					}
				})
			}
		},
    /**
     * 树形组件点击事件
     */
    handleNodeClick(data) {
			console.log(data);
			// 这里的data，默认就是树形控件绑定的data，不需要传实参
      // 这里主要配置树形组件点击节点后，设置选择器的值；自己配置的数据，仅供参考
      this.selectVal = data.title
      this.selectTitle = data.title
      // 选择器执行完成后，使其失去焦点隐藏下拉框的效果
			// blur() 当 input 失去焦点时触发
      this.$refs.select.blur()
      this.pid = data.id
    },

		// 点击确定按钮，通过id判断是新增，还是编辑
    onConfirmClick() {
			this.$refs.formRef.validate(async isOk => {
				if (isOk) {
					if (this.editData) {
						// 编辑
						await editMenusAPI(this.editData.id, {
							isPoint: this.formData.is_point,
							is_point: this.is_point,
							pid: this.editData.pid,
							code: this.formData.code,
							title: this.formData.title,
							id: this.editData.id
						})
						this.$message.success('修改成功')
						this.$emit('success')
					} else {
						// 添加
						console.log(777);
						await addMenusAPI({
							is_point: this.formData.is_point,
							pid: this.formData.pid,
							code: this.formData.code,
							title: this.formData.title
						})
						this.$message.success('添加成功')
						this.$emit('success')
						this.isTitle = false
					}
						this.$emit('update:visible', false)

				}
			})
    },
		// Dialog 打开的回调
    open() {
      this.selectVal = this.isData[0].title
    },
		// // radio的值发生变化的时候触发的事件
    // radioValueChange() {
    //   this.selectVal = ''
    // },
		// 点击关闭弹出层的按钮，关闭弹出层
		closed() {
      this.formData = {
        name: '',
        code: ''
      }
      this.selectTitle = ''
      this.isTitle = false
      this.$emit('update:visible', false)
    }
  }

}
</script>
<style lang="scss" scoped>
.bottom {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}
::v-deep .el-dialog{
	border-radius: 15px;
}
::v-deep .el-dialog__header{
	background-color:#409eff;
	border-radius: 15px 15px 0 0;

}
::v-deep .el-dialog__title{
	color:#fff;
}
::v-deep .el-dialog__close{
	color:#fff
}
</style>
